<template>
  <el-card>
    <el-button type="primary" @click="searchList">查询设置</el-button>
    <el-button type="primary" @click="addorder">新增设置</el-button>
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <el-table-column prop="week" label="提现类型">
        <template slot-scope="scope">
          <span>{{returnType(scope.row.type)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="week" label="提现时间(周几)">
        <template slot-scope="scope">
          <span>{{scope.row.week}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="qq" label="客服微信">
        
      </el-table-column>
      <el-table-column prop="fee" label="手续费%">
        
      </el-table-column>
      <el-table-column prop="water_name" label="流水名称">
        
      </el-table-column>
      <el-table-column prop="water_amount" label="流水金额">
        
      </el-table-column>
      <el-table-column prop="account_name" label="账户名称">
  
      </el-table-column>
      <el-table-column prop="account_code" label="账户号码">
   
      </el-table-column>
      <el-table-column prop="bank_name" label="开户银行">
   
      </el-table-column>
      <el-table-column prop="_add_time_str" label="创建时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="isorder" :close-on-click-modal="true" width="60%">
      <el-form ref="form" :model="order" label-width="180px">
        <el-form-item label="提现设置">
          <vk-data-input-select v-model="order.type" class="width200" clearable :localdata='typeArr'
      placeholder="请选择设置"></vk-data-input-select>
        </el-form-item>
        <el-form-item label="提现时间(周几)" v-if="order.type==1">
          <el-input class="width400" v-model="order.week"></el-input>
        </el-form-item>
        <el-form-item label="客服微信设置" v-if="order.type==4">
          <el-input class="width400" v-model="order.qq"></el-input>
        </el-form-item>
        <el-form-item label="提现手续费百分比" v-if="order.type==1">
          <el-input class="width400" type="number" v-model="order.fee"></el-input>
        </el-form-item>
        <el-form-item label="流水名称" v-if="order.type==3">
          <el-input class="width400" v-model="order.water_name"></el-input>
        </el-form-item>
        <el-form-item label="流水金额" v-if="order.type==3">
          <el-input class="width400" v-model="order.water_amount"></el-input>
        </el-form-item>
        <el-form-item label="账户名称" v-if="order.type==2">
          <el-input class="width400" v-model="order.account_name"></el-input>
        </el-form-item>
    <!--    <el-form-item label="专员微信" v-if="order.type==2">
          <vk-data-upload v-model="order.wxcode" :limit="1"></vk-data-upload>
        </el-form-item> -->
        <el-form-item label="账户号码" v-if="order.type==2">
          <el-input class="width400" v-model="order.account_code"></el-input>
        </el-form-item>
        <el-form-item label="开户银行" v-if="order.type==2">
          <el-input class="width400" v-model="order.bank_name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">更新</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        order: {
          week: '',
          type: 1
        },
        typeArr: [
          {
            value: 1,
            label: '时间设置'
          },
          {
            value: 2,
            label: '账户设置'
          },
          {
            value: 3,
            label: '流水设置'
          },
          {
            value: 4,
            label: '客服设置'
          },
          // {
          //   value: 5,
          //   label: '手续费设置'
          // }
        ],
        currentPage: 1,
        pageNum: 1,
        pageSize: 100,
        total: 0,
        isorder: false,
        tableData: [],
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      returnType(type) {
        if (type == 1) {
          return '时间设置'
        }
        if (type == 2) {
          return '账户设置'
        }
        if (type == 3) {
          return '流水设置'
        }
        if (type == 4) {
          return '客服设置'
        }
        if (type == 5) {
          return '手续费设置'
        }
      },
      addorder() {
        this.isorder = true
        this.order = {
          week: ''
        }
      },
      handleEdit(index, row) {
        this.order = row
        this.isorder = true
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该设置吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.orderDelete(row)
          }
        });
      },
      orderDelete(row) {
        uni.showLoading({
          title: '加载中...'
        })
        let that = this
        vk.callFunction({
          url: 'user/kh/withdrawSetDelete',
          data: {
            _id: row._id
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.getList()
            }
          }
        })
      },
      searchList() {
        this.pageNum = 1
        this.getList()
      },
      getList() {
        uni.showLoading({
          title: '加载中...'
        })
        vk.callFunction({
          url: 'user/kh/withdrawSetList',
          data: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
          success: (res) => {
            if (res) {
              uni.hideLoading()
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
      onSubmit() {
        uni.showLoading({
          title: '加载中...'
        })
        vk.callFunction({
          url: 'user/kh/withdrawSetPost',
          data: this.order,
          success: (res) => {
            if (res) {
              uni.hideLoading()
              console.log(res)
              this.isorder = false
              this.getList()
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }

  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }

  .width100 {
    width: 100px
  }

  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;

    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    &-name {
      margin-left: 10px;
    }

    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>